<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>普通用户银行卡管理</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxStatic}/layer/layer.js"></script>

	<script type="text/javascript">
		//新建普通实例
		$(document).ready(function() {
			//$("#name").focus();
			$(".add-card").bind("click",function () {
				var html="";
				html+="<div style='padding: 10px;' id='sc_wrap'>";
				html+="<div>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input type='text' style='height: 30px;' name='idName' placeholder='姓名'></div>";
				html+="<div>身份证号：<input type='text' style='height: 30px;' name='idNumber' placeholder='身份证号'></div>";
				html+="<div>卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：<input type='text' style='height: 30px;' name='cardNumber' placeholder='银行卡卡号'></div>";
				html+="<div>手机号&nbsp;&nbsp;&nbsp;：<input type='text' style='height: 30px;' name='phoneNumber' placeholder='所留手机号'></div>";
				//html+="<div><span style='color: red'>(*注：订金为0则客户无需支付定金)</span></div>";
				html+=	'<div class="row" style="display: block;margin: 0 auto;width: 200px;margin-top: 30px;">';
				html+=		'<input id="btn_do_bind" data-id="'+id+'" class="btn btn-primary" type="submit" value="绑 定"/>&nbsp;&nbsp;&nbsp;';
				html+=		'<input id="btn_cancel" class="btn" type="button" value="取 消" />';
				html+='</div>';
				html+="</div>"
				//页面层
				layer.open({
					type: 1,
					title:"绑定银行卡",
					skin: 'layui-layer-rim', //加上边框
					area: ['350px', '300px'], //宽高
					content: html
				});
			});
			$("body").on("click","#btn_cancel",function () {
				layer.closeAll();
			});
			$("body").on("click","#btn_do_bind",function () {
				var idName=$("input[name='idName']").val();
				var idNumber=$("input[name='idNumber']").val();
				var cardNumber=$("input[name='cardNumber']").val();
				var phoneNumber=$("input[name='phoneNumber']").val();
				if(!idName){
					layer.alert("请输入姓名！",-1);
					return;
				}
				if(!idNumber){
					layer.alert("请输入身份证号！",-1);
					return;
				}
				if(!cardNumber){
					layer.alert("请输入银行卡号！",-1);
					return;
				}
				if(!phoneNumber){
					layer.alert("请输入手机号！",-1);
					return;
				}
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(reg.test(idNumber) === false){
					layer.alert("身份证输入不合法",-1);
					return  false;
				}
				var regMobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
				if(regMobile.test(phoneNumber) === false){
					layer.alert("手机号输入不合法",-1);
					return  false;
				}
				var param={};
				param["idName"]=idName;
				param["idNumber"]=idNumber;
				param["cardNumber"]=cardNumber;
				param["phoneNumber"]=phoneNumber;
				param["memberId"]=$("#memberId").val()||"";
				//ajax去绑定银行卡
				$.ajax({
					type : 'post',
					url : '${ctx}/sys/member/memberBankcard/bindBankCard',
					async : false, //默认为true 异步
					data : param,
					dataType : 'json',
					success : function(data) {
						if(data){
							layer.alert("绑定成功",function () {
								window.location.href="${ctx}/sys/member/member/bankcardList?id=${member.id}";
							});
						}else{
							layer.alert("绑定失败",-1);
						}
					}
				});
			});
		});
	</script>
	<style>
		.card-box-list {
			overflow: hidden;
			zoom: 1;
			padding: 2px 0 0 2px;
		}
		.card-box-list .card-box {
			float: left;
			overflow: hidden;
			width: 230px;
			height: 160px;
			margin: 0 17px 20px 0;
			background: #EFF0F1;
			border-radius: 4px;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
			cursor: pointer;
			_cursor: hand;
			border: 1px solid #DDDDDD;
		}
		.card-box-list .card-box-hover { }
		.card-box-list .card-box:hover .card-box-name,
		.card-box-list .card-box-hover .card-box-name {
			zoom: 1;
			*overflow: visible; /* for a ie6/7 bug http://blog.csdn.net/jyy_12/article/details/6636099 */
			background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E8EB));
			background: -moz-linear-gradient(top, #FFFFFF, #E6E8EB);
			background:-o-linear-gradient(top, #FFFFFF, #E6E8EB);
			background: linear-gradient(top, #FFFFFF, #E6E8EB);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E8EB');
			background-color: #FFFFFF;
			color: #666666;
		}
		.card-box-list .card-box .card-box-name {
			border-radius: 4px 4px 0 0;
			height: 46px;
			position: relative;
		}
		.card-box-name .bank-logo {
			position: absolute;
			top: 13px;
			left: 12px;
		}
		.card-box-name .bank-name {
			position: absolute;
			top: 12px;
			left: 33px;
			overflow: hidden;
			width: 84px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.card-box-name .bank-num4 {
			position: absolute;
			top: 12px;
			right: 60px;
		}
		.card-box-name .card-type-DC,
		.card-box-name .card-type-CC,
		.card-box-name .card-type-SCC {
			position: absolute;
			top: 12px;
			right: 5px;
			overflow: hidden;
			width: 49px;
			height: 18px;
			text-indent: -9999px;
		}
		.card-box-name .card-type-DC{
			background: url(https://i.alipayobjects.com/e/201305/MbrAtHLGP.png) no-repeat left top;
		}
		.card-box-name .card-type-CC,
		.card-box-name .card-type-SCC {
			background: url(https://i.alipayobjects.com/e/201305/MbrAtHLGP.png) no-repeat left -18px;
		}
		.card-box-list .card-box .card-box-express {
			height: 37px;
			margin: 0 0 15px 0;
			background: #CFD2D4;
			border-top: 1px solid #ABADAF;
		}
		.card-box-list .card-box .express-status {
			float: left;
			padding: 9px 0 0 10px;
		}
		.card-box-list .card-box .express-status .asset-icon {
			vertical-align: -2px;
			margin-right: 10px;
		}
		.card-box-list .card-box .express-else {
			float: right;
			padding: 9px 10px 0 0;
		}
		.card-box-list .card-box .card-detail {
			color: #676d70;
		}
		.card-box-list .card-box .card-detail .card-detail-list {
			overflow-x: hidden;
			zoom: 1;
			padding: 4px 10px;
		}
		.card-box-list .card-box .card-detail .card-detail-list-first {
			margin: 0 0 15px 0;
			height: 19px;
			padding: 9px 10px 9px 10px;
			background: #CFD2D4;
			border-top: 1px solid #ABADAF;
		}
		.card-box-list .card-box .card-detail .card-detail-list .card-detail-value {
			float: left;
			overflow: hidden;
			width: 135px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.card-box-list .card-box .card-detail .card-detail-list .card-detail-value strong {
			font-weight: 400;
		}
		.card-box-list .card-box .card-detail .card-detail-list .card-detail-app {
			float: right;
			overflow: hidden;
			width: 74px;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: right;
		}
		/* -- 添加银行卡 -- */
		.add-card {
			float: left;
			width: 232px;
			margin: 0 17px 20px 0;
		}
		.add-card a,
		.add-card a:visited {
			display: block;
			overflow: hidden;
			zoom: 1;
			height: 112px;
			padding: 48px 0 0 0;
			text-align: center;
			text-decoration: none;
			border-radius: 4px;
			font-weight: 700;
			border: 1px dashed #AACCDD;
			background: #FAFAFB;
			outline: none;
			cursor: pointer;
			-webkit-transition: all 0.15s ease-in;
			transition: all 0.15s ease-in;
		}
		.add-card a:hover {
			border: 1px dashed #8599B2;
			background: #DFEEF7;
			-webkit-transition: all 0.15s ease-in;
			transition: all 0.15s ease-in;
		}
		.add-card .iconfont {
			display: block;
			margin: 0 auto;
			vertical-align: -5px;
			font-size: 30px;
			color: #A8B5C4;
			cursor: pointer;
		}
		.card-box-list .card-box .card-box-wk{
			background:none;
		}
		.card-box-list .wk-info{
			position:relative;
			top:-17px;
			background:#ffffcc;
			border-radius:5px;
			color:#666;
			padding:5px 10px;
			text-align:center;
		}
		.card-box-list .wk-info b{
			position:absolute;
			top:-5px;
			right:17px;
			border-bottom:5px solid #ffffcc;
			border-left:5px solid transparent;
			border-right:5px solid transparent;
		}
	</style>
</head>
<body>
<ul class="nav nav-tabs">
	<li><a href="${ctx}/sys/member/member/">用户信息列表</a></li>
	<li class="active"><a href="${ctx}/sys/member/member/bankcardList?id=${member.id}">用户银行卡管理</a></li>
</ul><br/>
<input type="hidden" id="memberId" value="${member.id}" />
<form:form id="inputForm" modelAttribute="member" action="${ctx}/sys/member/member/save" method="post" class="form-horizontal">
	<form:hidden path="id"/>
	<sys:message content="${message}"/>
	<div class="row">
		<div class="card-box-list J-card-box">
			<c:forEach items="${mbList}" var="mb">
				<div class="card-box">
					<div class="card-box-name">
						<span class="bank-logo"><%--<a href="#">
							<img src="https://i.alipayobjects.com/e/201305/NU5tIv4jd.png" width="16" height="16" alt=""></a>--%></span>
						<span class="bank-name" title="${mb.bankName}">${mb.bankName}</span>
						<span class="bank-num4"></span>
						<span class="card-type card-type-DC"></span>
					</div>
					<div class="card-box-express">
						<div class="express-status">
								${mb.cardNumber}
						</div>
						<%--<div class="express-else"><a href="" >删除</a></div>--%>
					</div>
					<div class="card-detail"></div>
				</div>
			</c:forEach>
			<div class="add-card J-add-card">
				<a href="javascript:void(0)" >
					<i class="iconfont"></i>添加银行卡</a>
			</div>
		</div>
	</div>
	<div class="form-actions">
		<shiro:hasPermission name="sys:member:member:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
		<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
	</div>
</form:form>
</body>
</html>